--- title: "A R graphic in a Yesod app" author: "Stéphane Laurent" date: '2023-12-02' tags: R, haskell rbloggers: yes output: md_document: variant: markdown preserve_yaml: true html_document: highlight: kate keep_md: no highlighter: pandoc-solarized --- Yesod is a web framework for Haskell. In this post I show how to do a Yesod application allowing to upload some data from a CSV or a XLSX file and to display a R graphic representing two selected columns of the data. ![](./figures/yesod-ggplot.gif) Below is the directory content of the application, available in [this Github repository](https://github.com/stla/yesod_ggplot). ``` | .dir-locals.el | client_session_key.aes | package.yaml | README.md | routes.yesodroutes | stack.yaml | +---app | Main.hs | +---src | Application.hs | Foundation.hs | GGplot.hs | Home.hs | \---static +---bootstrap-5.3.2 | +---css | | bootstrap.min.css | | bootstrap.min.css.map | | | \---js | bootstrap.bundle.min.js | bootstrap.bundle.min.js.map | +---DataTables-1.13.8 | | datatables.min.css | | datatables.min.js | | | \---images | sort_asc.png | sort_asc_disabled.png | sort_both.png | sort_desc.png | sort_desc_disabled.png | +---images | haskell.png | +---jQuery | jquery-3.7.1.min.js | +---PapaParse | papaparse.min.js | +---R | ggplotXY.R | \---SheetJS xlsx.core.min.js xlsx.core.min.map ``` I'm using **bootstrap** for the style, **DataTables** to display a nice table of the data, **PapaParse** to parse the uploaded CSV file to a JSON object, and **SheetJS** to convert the uploaded XLSX file to CSV data, which can then be parsed to a JSON object with **PapaParse**. [Hamlet](https://www.yesodweb.com/book/shakespearean-templates) is a HTML templating language developed for Yesod applications. Below is the Hamlet code of the application. I use a Bootstrap modal to display errors if there are. ```html $# BOOTSTRAP MODAL -----------------------------------------------------------